<template>
  <div>
    <!-------第一部分：放一个有图片作为背景 上面有文字和按钮-->
    <div >
      <div class="home-firstpart">
        <div class="home-title1">BasicFinder</div>
        <div >数据标注与数据采集服务</div>
        <div><b-button variant="primary" size="lg" class="firstpart-button"  @click="tolplatform">免费使用</b-button></div>
      </div>
    </div>
    <!--    第二部分-->
    <b-container fluid class="home-part2">
      <b-row>
        <b-col xs="12" sm="6" md="4" class="part2-part">
          <img src="../../assets/images/home-part2.png" width="100px" height="90px" class="header-img"/>
          <div class="part2-title">数据标注速度快</div>
<!--          最小屏幕占据全部 最大一行3个 中间一行两个-->
          <div>
            <div class="part2-des">北京 100 名数据标注培训专家;</div>
            <div class="part2-des">骨干成员 10 年数据行业经验;</div>
            <div class="part2-des">下辖 12 个数据标注中心;</div>
            <div class="part2-des">2000 名全职数据标注师;</div>
          </div>
        </b-col>

        <b-col xs="12" sm="6" md="4" class="part2-part">
          <img src="../../assets/images/home-part2.png" width="100px" height="100px" class="header-img"/>
          <div class="part2-title">数据标注速度快</div>
          <div >
            <div class="part2-des">北京 100 名数据标注培训专家;</div>
            <div class="part2-des">骨干成员 10 年数据行业经验;</div>
            <div class="part2-des">下辖 12 个数据标注中心;</div>
            <div class="part2-des">2000 名全职数据标注师;</div>
          </div>
        </b-col>
        <b-col xs="12" sm="6" md="4" class="part2-part">
          <img src="../../assets/images/home-part2.png" width="100px" height="100px" class="header-img"/>
          <div class="part2-title">数据标注速度快</div>
          <div >
            <div class="part2-des">北京 100 名数据标注培训专家;</div>
            <div class="part2-des">骨干成员 10 年数据行业经验;</div>
            <div class="part2-des">下辖 12 个数据标注中心;</div>
            <div class="part2-des">2000 名全职数据标注师;</div>
          </div>
        </b-col>
      </b-row>
    </b-container>
    <div id="chat" @click="mychat">在线客服<div><i class="el-icon-headset"></i></div></div>
    <!--    第三部分-->
    <b-img :src= this.part3 fluid-grow alt="Fluid-grow image" class="home-part3-img"></b-img>
    <!--    第四部分-->
    <div>
      <h2 class="home-part4-title">数据标注与采集经典案例</h2>
      <b-container fluid class="home-part2">
        <b-row>
          <b-col sm="4" xs="6">
            <b-img :src=this.eg1 fluid alt="Responsive image" id="but1" />
            <b-tooltip show target="but1">人脸识别</b-tooltip>
          </b-col>
          <b-col sm="4" xs="6">
            <b-img :src=this.eg1 fluid alt="Responsive image" id="but2" />
            <b-tooltip show target="but2">骨髓标注</b-tooltip>
          </b-col>
          <b-col sm="4" xs="6">
            <b-img :src=this.eg1 fluid alt="Responsive image"/>
          </b-col>
          <b-col sm="4" xs="6">
            <b-img :src=this.eg1 fluid alt="Responsive image"/>
          </b-col>
          <b-col sm="4" xs="6">
            <b-img :src=this.eg1 fluid alt="Responsive image"/>
          </b-col>
        </b-row>
      </b-container>
    </div>
    <!--    第五部分 赞助商-->
    <div>
      <h2 class="home-part4-title">合作伙伴</h2>
      <b-container fluid class="home-part2">
        <b-row>
          <b-col sm="4">
            <img src="../../assets/images/sponsor.png" class="home-part4-img">
          </b-col>
          <b-col sm="4">
            <img src="../../assets/images/sponsor.png" class="home-part4-img">
          </b-col>
          <b-col sm="4">
            <img src="../../assets/images/sponsor.png" class="home-part4-img">
          </b-col>
          <b-col sm="4">
            <img src="../../assets/images/sponsor.png" class="home-part4-img">
          </b-col>
        </b-row>
      </b-container>
<!--      <img src="../../assets/images/sponsor.png" class="home-part4-img">-->
    </div>
    <!--    第六部分 -->
    <div >
      <div class="home-firstpart">
        <div class="home-sixpart">BasicFinder 期待您的到来...</div>
        <div >我们打造领先的AI数据加速器</div>
        <div><b-button variant="primary" size="lg" class="firstpart-button">免费使用</b-button></div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      eg1: require('../../assets/images/home-eg1.png'),
      part3: require('../../assets/images/home-part3.png')
    }
  },
  methods: {
    tolplatform () {
      this.$router.push({ name: 'try' })
    },
    mychat () {
      this.$router.push({ name: 'mychat' })
    }
  }
}
</script>

<style scoped lang="less">
  #chat{
    position: fixed;
    bottom: 10%;
    right: 0px;
    display: block;
    padding: 10px;
    background: #3a8ee6;
    color: white;
    text-align: center;
    cursor:pointer;
  }
  .container{
    background-color: beige;
    margin: 0;
  }
  .home-firstpart{
    background-color: beige;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    padding-top: 200px;
    .home-title1{
      /*overflow: visible;*/
      margin-bottom: 20px;
      font-size: 48px;
      font-weight: 700;
      overflow: hidden;
    }
    .firstpart-button{
      width: 200px;
      height: 42px;
      font-weight: 700;
      padding: 5px 0 5px 0;
      margin-top: 20px;
      margin-bottom: 100px;
      font-size: 18px;
    }
    .home-sixpart{
      font-size: 24px;
      font-weight: 500;
    }
  }
  .home-part2{
    text-align: center;
    /*margin-top: 100px;*/
    .part2-part{
      margin-top: 50px;
    }
    .part2-title{
      font-size: 18px;
      font-weight: 700;
      margin: 20px;
    }
    .part2-des{
      color: #999;
      font-size: 14px;
      padding: 6px;
    }
  }
  .home-part3-img{
    margin-top: 50px;
  }
  .home-part4-title{
    font-size: 30px;
    font-weight: 700;
    margin: 50px;
    text-align: center;
  }
  .part4-img{
    margin: 50px;
    width: 95%;
    height: auto;
    overflow: hidden;
    border-radius: 6px;
  }

</style>
